<template>
  <div>
    <SearchBar
      @onChange="onChange"
      @onClearClick="onClearClick"
      @onConfirm="onConfirm"
      :hotSearch="hotSearchKeyWord"
      :focus="searchFocus"
      ref="SearchBar"
    ></SearchBar>
    <TagGroup
      headerText="热门搜索"
      btnText="换一批"
      :value="hotSearchArray"
      @onBtnClick="changeHotSearch"
      @onTagClick="showBookDetail"
      v-if="hotSearch.length > 0 && !showList"
    ></TagGroup>
    <TagGroup
      headerText="搜索历史"
      btnText="清空"
      :value="historySearch"
      @onBtnClick="clearHistorySearch"
      @onTagClick="searchKeyWord"
      v-if="historySearch.length > 0 && !showList"
    ></TagGroup>
    <SearchList
      :data="searchListData"
      v-if="showList"
    ></SearchList>
  </div>
</template>

<script>
import SearchBar from '../../components/home/SearchBar'
import TagGroup from '../../components/base/TagGroup'
import SearchList from '../../components/search/SearchList'
import { getStorageSync, setStorageSync, removeStorageSync, showToast } from '../../api/wechat'
import { getHotSearch, getSearch } from '../../api/index'
export default {
  components: { SearchBar, TagGroup, SearchList },
  computed: {
    showList () {
      // 用户是在搜索页(没有搜索，显示热门搜索和搜索历史)
      // 在搜索详情页(搜索框中有关键词，搜索框下面搜出来的图书信息)
      // 为真，代表下面有搜出来的数据
      const keys = Object.keys(this.searchListData)
      return keys.length > 0
    },
    hotSearchArray () {
      const hotSearchArray = []
      this.hotSearch.forEach(e => {
        hotSearchArray.push(e.title)
      })
      return hotSearchArray
    }
  },
  data () {
    return {
      hotSearch: [],
      // 历史搜索的数据
      historySearch: [],
      searchListData: {},
      // 搜索栏要搜索的数据
      hotSearchKeyWord: '',
      // 搜索框是否自动获取焦点
      searchFocus: true,
      page: 1
    }
  },
  mounted () {
    this.getHotSearch()
    // 搜索框上的热门搜索词
    this.hotSearchKeyWord = this.$route.query.hotSearch
    // 搜索历史的数据
    this.historySearch = getStorageSync('historySearch') ? getStorageSync('historySearch') : []
    this.page = 1
  },
  // 屏幕滚动的生命周期回调函数
  onPageScroll () {
    if (this.searchFocus) {
      this.searchFocus = false
    }
  },
  async onReachBottom () {
    const _showList = this.showList
    if (_showList) {
      this.page = this.page + 1
      let keyword = this.$refs.SearchBar.getValue()
      let openId = getStorageSync('openId')
      let page = this.page
      const { data: { data: { book } } } = await getSearch(keyword, openId, page)
      if (book && book.length > 0) {
        this.searchListData.book.push(...book)
      } else {
        showToast('到底了，不要在滑了')
      }
    }
  },
  methods: {
    // 输入框-单击键盘右下角的确认键事件
    onConfirm (keyword) {
      if (!keyword || keyword.trim().length === 0) {
        // 输入框中没有值
        keyword = this.hotSearchKeyWord
        this.$refs.SearchBar.setValue(keyword)
      } else {
      }
      this.getSearch(keyword)
      // 搜索结果写入到历史搜索中
      if (!this.historySearch.includes(keyword)) {
        this.historySearch.push(keyword)
        setStorageSync('historySearch', this.historySearch)
      }
      // BUG 加下面这句(不加好像也有)，有时候会只能输入一个字符，就会失去焦点(蜜汁失去焦点)
      // BUG 猜测可以与seaarchBar的onChange()有关系
      // this.searchFocus = false
    },
    // 搜索框中清除icon的点击事件
    onClearClick () {
      console.log(2323)
      this.searchListData = {}
      console.log(this.searchListData)
    },
    // 点击换一批的切换热门搜索词
    changeHotSearch () {
      console.log('changeHotSearch')
      this.getHotSearch()
    },
    // 点击某个热门搜索词，进行跳转到某本图书
    showBookDetail (book) {
      console.log('showBookDetail', book)
      console.log(book)
      this.$router.push({ path: '/pages/detail/main', query: book })
    },
    // 清空历史搜索词
    clearHistorySearch () {
      this.historySearch = []
      removeStorageSync('historySearch')
      // 可以替换为setStorageSync('historySearch',[])
    },
    // 点击历史搜索词，进行关键词搜索
    searchKeyWord (text, index) {
      this.$refs.SearchBar.setValue(text)
      this.getSearch(text)
    },
    // 搜索框输入监听事件
    onChange (keyword) {
      if (!keyword || keyword.trim().length === 0) {
        this.searchListData = {}
        return
      }
      this.page = 1
      this.getSearch(keyword)
    },
    // 搜索
    async getSearch (keyword) {
      let openId = getStorageSync('openId')
      let page = this.page
      const { data: { data } } = await getSearch(keyword, openId, page)
      this.searchListData = data
    },
    // 获取热门搜索
    async getHotSearch () {
      const { data: { data } } = await getHotSearch()
      this.hotSearch = data
    }
  }
}
</script>

<style lang="scss" scoped>
</style>